<template>
  <div class="MyList-page">
    <van-list
    v-model:loading="loading"
    :finished="finished"
    finished-text="没有更多了"
    v-if="data.length>0"
  >
    <van-cell v-for="item in data" :key="item.id"  >
        <div class="content_box" >
            <div class="header">
                <div class="left-head"  @click="scheduleAgain(item.counselor_id)">
                    <gh-icon class="icon" name="consult-zixunshi" />
                    <span>{{item.name}}</span>
                    <span class="arrow">></span>
                </div>
                <div class="right-head">{{getStatusInChinese(item.status)}}</div>
             </div>
             <div class="middle"  @click="scheduleAgain(item.counselor_id)">
                <div class="pic_box">
                    <img :src="item.avatar">
                </div>
                <div class="timeInfo">
                    <p class="date">  预约时间：{{item.date}} </p>
                    <p class="timeSlot"> {{item.start_time}}-{{item.end_time}}</p>
                </div>
                <div class="price">￥120</div>
             </div>
             <div class="bottom">
                <div class="more">更多</div>
                <div class="again" @click="handleAction(item)">
                {{item.status=='Scheduled'?'取消预约':'再次预约'}}
                </div>
             </div>
        </div>
    </van-cell>
    
  </van-list>
  <div class="nothing-info" v-else>
    <van-empty  image-size="100"  image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png" description="暂预约信息" />
</div>
  </div>
</template>

<script setup>
import {ref,reactive,onBeforeMount,computed,onMounted,watch} from "vue"
import { Toast, Dialog } from 'vant';
import 'vant/es/toast/style'
import{useRouter,useRoute}from 'vue-router'
import { cancelBooking}from '@/services/booking'
const router =useRouter();  
const route =useRoute()
//接收父传子对象
const props= defineProps({
data:Array
})

const loading = ref(false);
const finished = ref(false);
//定义方法接收status并返回对应的中文值
const getStatusInChinese=(status)=>{
    return status === 'Scheduled' ? '待使用' :
             status === 'Completed' ? '已完成' :
             status === 'Cancelled' ? '已取消' :
             status;
}


onBeforeMount(() => {
//   console.log('父组件传递的data数据：', props.data);
  init();
});

const init=async()=>{
    // 在这里处理数据，这里只是一个简单示例
  if (props.date && props.date.length > 0) {
    // 处理数据逻辑，可以根据实际数据结构进行遍历和处理
     console.log('1')
  } else {
    // Toast('没有数据');
    finished.value = true;
  }
}
//处理取消预约和再次预约按钮
const handleAction=(item)=>{
    if(item.status=='Scheduled'){
        cancelBooking1(item)
        return
     }
     else{
        scheduleAgain(item.counselor_id)
     }
}
//取消预约函数
const cancelBooking1=async(item)=>{
    console.log(item)
    await Dialog.confirm({
    title: '温馨提示',
    message: '您确认要取消预约码？'
  })
   .then(async() => {
     const formData=new FormData()
     formData.append('coun_id',item.id)
     formData.append('appointment_id',item.appointment_id)
     formData.append('start_time',item.start_time)
     formData.append('date',item.date)
     formData.append('end_time',item.end_time)
     const res=await cancelBooking(formData).then((response)=>{
      return response
    }).catch((error)=>{
     return error
    });
    console.log(res)
    if(res.status!==201){
   if(res.response.status==402){
        const toastMessage=res.response.data.error
        Toast.fail(toastMessage)
        isRegistering.value=false;
        return
    }
    if(res.response.status==404){
        const toastMessage=res.response.data.error
        Toast.fail(toastMessage)
        isRegistering.value=false;
        return
    }
    }
    Toast.success('已取消预约')
    // 强制刷新当前页面
    location.reload(true);
  })
  .catch(() => {
    Toast('取消操作')
  });
}
//再次预约函数
const scheduleAgain=(id)=>{
    router.push(`/detailConsultant/${id}`)
}



</script>

<style lang="scss" scoped>
.MyList-page{
    margin-top: 40px;
     width: 100%;
     .van-cell{
        width: 100%;
        padding: 10px;
        /* height: 130px; */
        margin-top:10px;
        border-top: 10px solid #f5f5f5;
        background-color:#fff;
        .content_box{
            width: 100%;
            height: 100%;
            .header{
                display: flex;
                align-items: center;
                width: 100%;
                height: 30px;
                padding: 0 20px;
                justify-content: space-between;
                .left-head{
                    .icon{
                    font-size: 16px;
                    top: 10px;
                    margin-right: 10px;
                }
                span{
                    font-size: 14px;
                    font-weight: bold;
                 }
                 .arrow{
                    font-size: 12px;
                    color: var(--gh-dark);
                    margin-left: 10px;
                 }
               }
               .right-head{
                   color: var(--gh-text3);
               }
            }
            .middle{
                 width: 100%;
                 padding: 10px 20px;
                 display: flex;
                 justify-content: space-around;
                 align-items: center;
                 .pic_box{
                    width: 50px;
                    height: 50px;
                    img{
                        display: block;
                        width: 100%;
                        height: 100%;
                        border-radius: 10px;
                    }
                 }
                 .timeInfo{
                    font-size: 12px;
                    .date{
                        font-weight: bold;
                    }
                    .timeSlot{
                        font-size: 14px;
                    }
                 }
                 .price{
                    color: var(--gh-price);
                    font-size: 16px;
                    font-weight: bold;
                 }
            }
            .bottom{
                display: flex;
                justify-content: space-between;
                margin-top: 8px;
                padding: 0 25px;
                .more{
                    color: var(--gh-text3);
                    font-size: 12px;
                    font-family: '黑体';
                }
                .again{
                    width: 80px;
                    text-align: center;
                    border: 1px solid var(--gh-primary);
                    border-radius: 8px;
                    font-size: 12px;
                    font-family: '黑体';
                }
            }
        }
     }

}

</style>
